<d-button (btnClick)="getCheckedRows()">Get CheckedRows</d-button>
<d-data-table
  [dataSource]="sortableDataSource"
  [scrollable]="true"
  [tableWidthConfig]="tableWidthConfig"
  [showOperationArea]="false"
  [onlyOneColumnSort]="true"
  [tableOverflowType]="'overlay'"
>
  <thead dTableHead [checkable]="true">
    <tr dTableRow>
      <th dHeadCell>#</th>
      <th
        dHeadCell
        [filterable]="true"
        [closeFilterWhenScroll]="true"
        [filterList]="filterListMulti"
        [beforeFilter]="beforeFilter"
        (filterChange)="onFirstFilterChange($event)"
        (filterToggle)="onToggle($event)"
        [extraFilterTemplate]="extraFilterTemplate"
        [resizeEnabled]="true"
        (resizeEndEvent)="onResize($event, 'firstName')"
      >
        First Name
      </th>
      <th
        dHeadCell
        [minWidth]="'100px'"
        [sortable]="true"
        [showSortIcon]="true"
        [(sortDirection)]="lastNameSortDirection"
        (sortChange)="onSortChange($event, 'lastName')"
        [filterable]="true"
        [closeFilterWhenScroll]="true"
        [filterIconActive]="filterIconActive"
        [customFilterTemplate]="customFilterTemplate"
        [resizeEnabled]="true"
        (resizeEndEvent)="onResize($event, 'lastName')"
      >
        Last Name
      </th>
      <th
        dHeadCell
        [sortable]="true"
        [showSortIcon]="false"
        (sortChange)="onSortChange($event, 'Gender')"
        [filterable]="true"
        [filterMultiple]="false"
        [filterList]="filterListRadio"
        [filterBoxWidth]="'200px'"
        (filterChange)="filterChangeRadio($event)"
      >
        Gender
      </th>
      <th dHeadCell>Date of birth</th>
      <th dHeadCell>description</th>
    </tr>
  </thead>
  <tbody dTableBody>
    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
      <tr dTableRow [ngClass]="{ 'table-row-selected': rowItem.$checked }">
        <td dTableCell class="devui-checkable-cell">
          <d-checkbox
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"
            [ngModel]="rowItem.$checked"
            [halfchecked]="rowItem.$halfChecked"
            [disabled]="rowItem.$checkDisabled"
            dTooltip
            [content]="rowItem.$checkBoxTips"
            [position]="['top', 'right', 'bottom', 'left']"
          >
          </d-checkbox>
        </td>
        <td dTableCell>{{ rowItem?.id }}</td>
        <td dTableCell>
          <span *ngIf="!rowItem.firstNameEdit">{{ rowItem?.firstName }}</span>
          <input *ngIf="rowItem.firstNameEdit" [(ngModel)]="rowItem.firstName" type="text" />
        </td>
        <td dTableCell>{{ rowItem?.lastName }}</td>
        <td dTableCell>{{ rowItem?.gender }}</td>
        <td dTableCell>{{ rowItem?.dob | i18nDate : 'short' : false }}</td>
        <td dTableCell>{{ rowItem?.description }}</td>
      </tr>
    </ng-template>
  </tbody>
</d-data-table>
<ng-template #extraFilterTemplate let-checked="checked" let-halfChecked="halfChecked">
  <span>{{ checked ? 'All selected' : halfChecked ? 'Some selected' : ' None selected' }}</span>
</ng-template>
<ng-template #customFilterTemplate let-filterList="filterListDisplay" let-dropdown="dropdown">
  <div class="custom-filter-content">
    <div class="filter-options">
      <div *ngFor="let item of checkboxList" class="checkbox-group">
        <d-checkbox
          [label]="item.lastName"
          [(ngModel)]="item.chosen"
          [labelTemplate]="myCheckbox"
          (change)="onCheckboxChange($event, item.lastName)"
        >
          <ng-template #myCheckbox let-label="label">
            <span style="margin-left: 15px">
              <d-avatar [name]="label" [width]="16" [height]="16"></d-avatar>
            </span>
            <span class="label-style">{{ label }}</span>
          </ng-template>
        </d-checkbox>
      </div>
    </div>
    <div class="line"></div>
    <div>
      <span class="button-style" style="border-right: 1px solid #e8f0fd; margin-left: 10px" (click)="filterSource(dropdown)">CONFIRM</span>
      <span class="button-style" (click)="cancelFilter(dropdown)">CANCEL</span>
    </div>
  </div>
</ng-template>
<p style="margin-top: 20px">Current Sort parameters:</p>
<pre>{{ sortParams | json }}</pre>
